<template>
<div class="toolbar" style="position:relative;box-shadow:0 5px 10px #ddd;padding-bottom: 0px;border: 1px solid #f0f0f0;background:#fff;">
    <el-form :inline="true">
        <template>

            <el-form-item v-for="(item,index) in searchList" :key="index" :label="item.title+':'">
                <template v-if="item.type=='input'||item.type==''||!item.type">
                    <el-input v-model="item.value" size="small"></el-input>
                </template>
                <template v-else-if="item.type=='datetime'">
                    <el-date-picker v-model="item.value" type="datetime" size="small" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </template>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search" size="small"><i class="el-icon-search"></i>查询</el-button>
            </el-form-item>
        </template>

    </el-form>
</div>
<!-- <el-col class="toolbar" style="position:relative;box-shadow:0 5px 10px #ddd;padding-bottom: 0px;border: 1px solid #f0f0f0;background:#fff;">

</el-col> -->
</template>

<script>
export default {
    name: 'Search',
    data() {
        return {}
    },
    props: {
        searchList: {
            type: Array,
            default: [{
                value: "",
                name: "",
                title: "",
                valueType: "",
                type: "input",
                operator: "=",
                connect: "And",
            }]
        }
    },
    methods: {
        search: function () {
       
            let filters = this.getSearchList();
      
            this.$emit('search', filters);
        },
        reset: function () {
            this.searchList.forEach(function (data, key) {
                data.value = "";
            });
        },
        getSearchList: function () {
            let _searchList = this.searchList;
            let filters = [];
            _searchList.forEach(function (data, key) {
                if (data.value != null && data.value != undefined&&data.value!="") {
                    filters.push({
                        Connect: data.connect===undefined?"And":data.connect,
                        Operate: data.operator===undefined?"=":data.operator,
                        Value: data.value,
                        Field: data.name,
                    });
                }

            });
            return filters;

        }

    }
}
</script>

<style scoped>
.search {
    padding: 10px;
}

input {

    height: 32px;
}
</style>
